<template>
  <dv-border-box1>
    <div class="header">当日值班人员</div>
    <div class="duty-box2">
      <div style="flex: 3">
        <div class="title-box" style="margin-top: 10px">
          <div class="title">班组</div>
          <div class="title">姓名</div>
          <div class="title">电话</div>
        </div>
        <div class="title-box" v-for="item in list" style="margin-top: 15px">
          <div class="title">{{ item.type === 100 ? '白班' : '夜班' }}</div>
          <div class="title">{{ item.name_list }}</div>
          <div class="title">{{ item.phone_list }}</div>
        </div>
      </div>
      <div
        style="
          flex: 2;
          display: flex;
          text-align: left;
          flex-direction: column;
          color: #fff;
          border-left: 1px solid #fff;
          padding-left: 40px;
          margin-left: 30px;
        "
      >
        <div style="margin-top: 10px">
          <div>{{ room.name }}电话</div>
          <div style="margin-top: 4px">{{ room.phone }}</div>
        </div>
        <div style="margin-top: 35px">
          <div>当前日期</div>
          <div style="margin-top: 4px">{{ dateTime }}</div>
        </div>
      </div>
      <!-- <div class="duty-list" v-for="(item, key, index) in list" :key="index">
        <div class="title">{{ key }}</div>
        <div class="user">
          <el-popover
            placement="bottom"
            trigger="hover"
            popper-class="tooltip-style"
            v-for="(item2, index2) in item"
            :key="index2"
          >
            <template #reference>
              <div>{{ item2.name_list }}</div>
            </template>
            <div class="content" style="width: 180px">
              <div>电话：{{ item2.phone_list }}</div>
              <div>职务：{{ item2.duties }}</div>
            </div>
          </el-popover>
        </div>
        <div class="user">
          <div v-for="(item2, index2) in item" :key="index2">{{ item2.phone_list }}</div>
        </div>
      </div> -->
    </div>
    <!-- <div
      @click="router.push('/xfSupervise/zhiban')"
      style="position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%)"
    >
      <el-link style="color: #dfdfdf" :underline="false">今日未添加值班，请前往添加</el-link>
    </div> -->
  </dv-border-box1>
</template>

<script lang="ts" setup>
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
import { zhibanNow } from '@/api/dashboard'
import dayjs from 'dayjs'
const dateTime = ref('')
dateTime.value = dayjs().format('YYYY年MM月DD日')
const router = useRouter()
const list = ref([])
const room = ref({})
const getList = async () => {
  const { data } = await zhibanNow()
  list.value = data.data
  room.value = data.room
}
getList()
setInterval(() => {
  dateTime.value = dayjs().format('YYYY年MM月DD日')
}, 1500)
</script>

<style lang="scss" scoped>
.dv-border-box-1 {
  font-size: 14px;
  .header {
    color: #edf4ff;
    height: 20px;
    font-family: 'myFont';
    font-size: 20px;
  }
  .duty-box {
    padding: 20px;
    height: 280px;
    overflow: auto;
    .duty-list {
      display: flex;
      justify-content: space-between;
      color: #edf4ff;
      margin-bottom: 30px;
      .title {
        flex: 2;
      }
      .user {
        display: flex;
        justify-content: center;
        flex: 4;
        cursor: pointer;
        .el-tooltip__trigger:not(:first-child)::before {
          content: '/';
        }
      }
    }
  }
  .duty-box2 {
    display: flex;
    height: 80%;
    padding-top: 20px;
    .title-box {
      display: flex;
      .title {
        color: #fff;
        flex: 1;
      }
    }
  }
}
</style>
